<template>
  <div class="menu">
    <div
      v-for="(item,index) in chatMenu"
      :key="index"
      class="Box"
      :class="{changeColor:currentIndex===index}"
      @click="changeIndex(index,item.roomId,item.username)"
    >
      <div class="leftItem">
        <img :src="item.avatar" alt="头像" />
      </div>
      <div class="rightItem">
        <!-- <p>{{item.username}}</p> -->
        <p>{{item.realname}}</p>
        <p>{{item.message}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from "../bus"
export default {
  props: {
    chatMenu: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      currentIndex: -1,
      lastUsername: "root",
      initChat: [],
      chatItem: [],//存储我和她之间的对话
    };
  },
  created() {
    // if (this.$store.getters.user.status === "876ea4f21078c7d38e3b0bdc74a") {
    //   this.initLeftMessage();
    // }
  },
  methods: {
    // initLeftMessage() {
    //   this.$axios.get("/chat/lastSearch").then((res) => {
    //     if (res.data.error === -1) {
    //       this.initChat = res.data.data;

    //       this.$emit("initChat",this.initChat)

    //     }else{
    //       this.initChat = [];
    //     }
    //   }).catch(err=>{
    //     alert("服务器出现问题如多次出现请联系博主")
    //   })
    // },
    changeIndex(index, roomId, username) {
      this.$socket.emit("leave", {
        socketId: this.lastUsername,
        realname: "root",
      });
      this.currentIndex = index;
      this.$socket.emit("join", { socketId: roomId, realname: "root" });
      //进入新房间，由于在新房间发送消息需要当前用户的username，因此改变自身username来进行谈话
      this.$emit("sendMessageToJoinRoom", username);
      this.lastUsername = username; //保存当前房间的房间号，为了在更改房间时给上一个房间发送消息


      // 然后开始从数据库里面提取我与她交流的信息
      this.$axios
        .get("/chat/search", {
          params: {
            username: "2628735401",
            Tousername: username,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.error === -1) {
            this.chatItem = res.data.data;
            this.$emit("seeCurrentUserMessage",this.chatItem)
          } else {
            // 错误提示
            Bus.$emit("live2dAboutSendError")

          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.changeColor {
  background-color: rgba(255, 255, 255, 0.6);
  color: #333 !important;
  
}
.menu {
  font-size: 17px;
  // display: inline-block;
  width: 300px;
  height: 100%;
  padding: 5px;
  box-sizing: border-box;
  background-color: rgba(255 , 255, 255, 0.6);
  overflow: auto;
  .Box {
    box-sizing: border-box;
    width: 100%;
    height: 55px;
    box-sizing: border-box;
    background-color: #ffffff88;
    border-radius: 10px;
    margin: 5px 0;
    padding: 6px;
    display: flex;
    &:hover{
    background-color: rgb(217,236,255);
  }
    .leftItem {
      margin-right: 5px;
      img {
        width: 40px;
        height: 40px;
        border-radius: 40px;
      }
    }
    .rightItem {
      color: #333;
      font-size: 12px;
      overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: nowrap;
      p{
        font-weight: 200;
        overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      }
    }
  }
}
</style>